 <template>
  <div>
    <div
      id="chartEnterWeixinMpUserCount"
      style="width: 100%; height: 200px"
    ></div>
    <div
      id="chartDailyOrderCount"
      style="width: 100; height: 200px; margin-top: 5px"
    ></div>
    <div
      id="chartDailyOrderTotalPrice"
      style="width: 100; height: 200px; margin-top: 5px"
    ></div>
    <div
      id="chartPercentOfAllGoods"
      style="width: 100; height: 200px; margin-top: 5px"
    ></div>
  </div>
</template>

<script>
let Echarts = require("echarts/lib/echarts");
// 按需引入对应的模块
require("echarts/lib/chart/bar");
import * as echartsApi from "../api/datahubApi";
export default {
  data() {
    return {
      echartsData: {},
    };
  },
  mounted() {
    echartsApi.getAllEchartDatas({
      success: (res) => {
        this.echartsData = res.data;
        this.initChartEnterWeixinMpUserCount();
        this.initChartDailyOrderCount();
        this.initChartDailyOrderTotalPrice();
        this.initChartPercentOfAllGoods();
      },
    });
  },
  methods: {
    // 每日进入小程序用户数
    initChartEnterWeixinMpUserCount() {
      let dates = [];
      let values = [];
      if (
        this.echartsData != null &&
        this.echartsData.chartEnterWeixinMpUserCount != null &&
        this.echartsData.chartEnterWeixinMpUserCount.xValues != null
      ) {
        dates = this.echartsData.chartEnterWeixinMpUserCount.xValues;
        values = this.echartsData.chartEnterWeixinMpUserCount.yValues;
      }

      let chart = Echarts.init(
        document.getElementById("chartEnterWeixinMpUserCount"),
        "dark"
      );
      let option = {
        title: {
          text: "每日进入小程序用户数",
          left: "center",
          top: 0,
          textStyle: {
            color: "#ccc",
          },
        },
        xAxis: {
          type: "category",
          data: dates,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}人",
          },
        },
        series: [
          {
            data: values,
            type: "bar",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}人",
        },
      };
      chart.setOption(option);
      // 自适应窗口大小
      window.addEventListener("resize", () => {
        chart.resize();
      });
    },
    // 每日订单量
    initChartDailyOrderCount() {
      let dates = [];
      let values = [];
      if (
        this.echartsData != null &&
        this.echartsData.chartDailyOrderCount != null &&
        this.echartsData.chartDailyOrderCount.xValues != null
      ) {
        dates = this.echartsData.chartDailyOrderCount.xValues;
        values = this.echartsData.chartDailyOrderCount.yValues;
      }

      let chart = Echarts.init(
        document.getElementById("chartDailyOrderCount"),
        "dark"
      );
      let option = {
        title: {
          text: "每日订单量",
          left: "center",
          top: 0,
          textStyle: {
            color: "#ccc",
          },
        },
        xAxis: {
          type: "category",
          data: dates,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: values,
            type: "bar",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}",
        },
      };
      chart.setOption(option);
      // 自适应窗口大小
      window.addEventListener("resize", () => {
        chart.resize();
      });
    },
    // 每日流水账单
    initChartDailyOrderTotalPrice() {
      let dates = [];
      let values = [];
      if (
        this.echartsData != null &&
        this.echartsData.chartDailyOrderTotalPrice != null &&
        this.echartsData.chartDailyOrderTotalPrice.xValues != null
      ) {
        dates = this.echartsData.chartDailyOrderTotalPrice.xValues;
        values = this.echartsData.chartDailyOrderTotalPrice.yValues;
      }

      let chart = Echarts.init(
        document.getElementById("chartDailyOrderTotalPrice"),
        "dark"
      );
      let option = {
        title: {
          text: "每日流水账单",
          left: "center",
          top: 0,
          textStyle: {
            color: "#ccc",
          },
        },
        xAxis: {
          type: "category",
          data: dates,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}元",
          },
        },
        series: [
          {
            data: values,
            type: "bar",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}元",
        },
      };
      chart.setOption(option);
      // 自适应窗口大小
      window.addEventListener("resize", () => {
        chart.resize();
      });
    },
    // 扇形图，各个奶茶的销量占比
    initChartPercentOfAllGoods() {
      let names = [];
      let values = [];
      if (
        this.echartsData != null &&
        this.echartsData.chartPercentOfAllGoods != null &&
        this.echartsData.chartPercentOfAllGoods.names != null
      ) {
        names = this.echartsData.chartPercentOfAllGoods.names;
        values = this.echartsData.chartPercentOfAllGoods.values;
      }

      let chart = Echarts.init(
        document.getElementById("chartPercentOfAllGoods"),
        "dark"
      );
      let option = {
        title: {
          text: "各个奶茶的销量占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 30,
          bottom: 0,
          data: names,
        },
        series: [
          {
            name: "奶茶名",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: values,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      chart.setOption(option);
      // 自适应窗口大小
      window.addEventListener("resize", () => {
        chart.resize();
      });
    },
  },
};
</script>

<style>
#chatOne {
  transition-delay: 0ms;
}
</style>